<!--
 * @Author: 橘子
 * @Date: 2022-11-26 23:08:50
 * @Project_description: 修改用户信息
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div>
    <el-card class='box-card' shadow='always'>
      <div slot='header' class='clearfix'>
        <span>修改用户信息</span>
        <el-button style='float: right; padding: 3px 0' type='text' @click='cancel'>取消</el-button>
      </div>
      <!-- 内容 -->
      <el-form ref='form' :model='form' :rules='rules' class='demo-ruleForm' label-width='100px' status-icon>
        <el-form-item label='头像' prop='avatarImg'>
          <y-upload-img v-model='form.avatarImg' :limit='1' />
        </el-form-item>
        <el-form-item label='姓名' prop='userName'>
          <el-input v-model='form.userName' clearable maxlength='10' type='text'></el-input>
        </el-form-item>
        <el-form-item label='账号' prop='accountNumber'>
          <el-input v-model='form.accountNumber' clearable maxlength='18'></el-input>
        </el-form-item>
        <el-form-item label='手机号' prop='phone'>
          <el-input v-model='form.phone' clearable type='number'></el-input>
        </el-form-item>
        <el-form-item label='身份证' prop='idCard'>
          <el-input v-model='form.idCard' clearable></el-input>
        </el-form-item>
        <el-form-item label='备注' prop='remarks'>
          <el-input
            v-model='form.remarks'
            :rows='3'
            autocomplete='off'
            placeholder='请输入内容'
            type='textarea'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='submitForm()'>提交</el-button>
          <!--          <el-button @click='edit'>取消</el-button>-->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import validator from '@/libs/utli.validator'
import { mapState } from 'vuex'

export default {
  name: 'putUser',
  computed: {
    ...mapState('d2admin/user', [
      'isEdit',
    ]),
  },
  watch: {
    isEdit(o) {
      this.form = this.$db._getUser()
    },
  },
  data() {
    // 这里存放数据
    return {
      form: {
        avatarImg: '',
        userName: '',
        accountNumber: '',
        idCard: '',
        phone: '',
        remarks: '',
      },
      rules: {
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        avatarImg: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
        accountNumber: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
        idCard: [
          // { required: true, message: '身份证不能为空', trigger: 'blur' },
          { validator: validator.idCard, trigger: 'blur' },
        ],
        phone: [
          { validator: validator.phone, trigger: 'blur' },
        ],
      },
    }
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.form = this.$db._getUser()
  },
  // 方法集合
  methods: {
    submitForm() {
      let _this = this
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await _this.$api.user.put(_this.form)
          _this.$message.success('更新成功')
          _this.$db._setUser('userName', _this.form.userName)
          _this.$db._setUser('name', _this.form.userName)
          _this.$db._setUser('accountNumber', _this.form.accountNumber)
          _this.$db._setUser('avatarImg', _this.form.avatarImg)
          _this.$db._setUser('idCard', _this.form.idCard)
          _this.$db._setUser('phone', _this.form.phone)
          _this.$db._setUser('remarks', _this.form.remarks)
          _this.$emit('update')
        } else {
          return false
        }
      })
    },
    //更新
    cancel() {
      this.$emit('update')
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
